<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <style>
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
       <div id="app">
           <my-parent :imgtitle="title" :imgsrc="img"></my-parent>
       </div>
       <template id="my_img">
           <img :src="imgsrc" alt="" width="200" height="200">
       </template>
       <template id="my_title">
           <p>{{title}}</p>
       </template>
       <template id="my_parent">
           <div>
               <child01 :imgsrc="imgsrc"></child01>
               <child02 :title="imgtitle"></child02>
           </div>
       </template>
    </body>
</html>
<script>
    let child1=Vue.extend({
        template:"#my_img",
        props:['imgsrc']
    });
     let child2=Vue.extend({
        template:"#my_title",
        props:['title']
    })
     Vue.component("my-parent",{
        template:"#my_parent",
        props:['imgtitle','imgsrc'],
        components:{
            'child01':child1,
            'child02':child2
        }
    });
    //1.创建vue实例
    let vm=new Vue({
        el:'#app',
        data:{
            title:'你好，世界！',
            img:'img/1.png'
        }
    });
</script>